<template>
	<div id="main">
		<template v-if="!loading">
			<el-header style="padding:0px; height: 64px;">
				<Header></Header>
			</el-header>
			<el-container style="width:100%;height:calc(100% - 64px);">
				<el-aside style="width: 200px; height: 100%;border-top: 1px solid #E7E7E7;">
					<Aside></Aside>
				</el-aside>
				<el-main class="main">
					<router-view></router-view>
					<!-- <keep-alive>
					<router-view></router-view>
					</keep-alive> -->
				</el-main>
			</el-container>
		</template>
	</div>
</template>

<script>
	//导入首页组件
	import Header from "./CommonHeader.vue";
	//导入侧边栏组件
	import Aside from "./CommonAside.vue";
	//导出组件，可以使其他组件导入本组件
	export default {
		//导入相应组件后注册组件
		data() {
			return {
				loading: true
			}
		},
		components: {
			Header,
			Aside,
		},
		created() {
			Promise.all([
				this.getPermissions()
			]).then(() => {
				this.loading = false
			})
		},
		methods: {
			getPermissions() {
				return this.$http.post(`/api/login/getmenu`, {}).then(res => {
					let arr = []
					res.result.forEach(res => {
						arr.push(res.name)
						if (res.childs.length > 0) {
							res.childs.forEach(res2 => {
								arr.push(res2.name)
								if (res2.childs.length > 0) {
									res2.childs.forEach(res3 => {
										arr.push(res3.name)
										if (res3.childs.length > 0) {
											res3.childs.forEach(res4 => {
												arr.push(res4.name)
											})
										}
									})
								}
							})
						}
					})
					this.$store.commit('sethasPermission', arr)
					this.$store.dispatch("userCzqAction")
				})
			},
		}
	}
</script>

<style>
	#main {
		margin: 0px;
		padding: 0px;
		height: 100%;
		width: 100%;
	}

	.main {
		background-color: #F0F2F5;
	}
</style>